<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个div在container中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type : 'get',
            url : '/userInfo',
            success : function(body){
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = "玩家：" + body.username + " 分数：" + body.score
                + "<br> 比赛场次：" + body.totalCount + " 获胜场数：" + body.winCount 
            },
            error: function(){
                alert("获取用户信息失败！");
            }
        });
        //此处初始化websocket,并且实现前端的匹配逻辑
        let websocket = new WebSocket('ws://127.0.0.1:8080/findMatch');
        websocket.onopen = function(){
            console.log("onopen");
        }
        websocket.onclose = function(){
            console.log("onclose");
        }
        websocket.onerror = function(){
            console.log("onerror");
        }
        //监听页面关闭事件，在页面关闭之前，手动调用这里的websocket 的 close 方法
        window.onbeforeunload = function(){
            websocket.close();
        }

        websocket.onmessage = function(e){
            //把json字符串转换为js对象
            let resp = JSON.parse(e.data);
            let matchButton =document.querySelector('#match-button');
            if(!resp.ok){
                console.log("游戏大厅中接收到了失败响应！" + resp.reason);
                return;
            }
            if(resp.message == 'startMatch'){
                //开始匹配请求发送成功
                console.log("进入匹配队列成功！");
                matchButton.innerHTML = '匹配中...(点击停止)';
            }else if(resp.message == 'stopMatch'){
                //结束匹配请求发送成功
                console.log("离开匹配队列成功！");
                matchButton.innerHTML == '开始匹配';
            }else if(resp.message == 'matchSuccess'){
                //已经匹配到对手了
                console.log("匹配到对手！进入游戏房间！");
                location.assign("/game_room.html");
            }else{
                console.log("收到了非法的响应！ message=" + resp.message);
            }
        }

        //给匹配按钮添加一个点击事件
        let matchButton =document.querySelector('#match-button');
        matchButton.onclick = function(){
            //在触发websocket请求之前，先确认下websocket连接是否好着
            if(websocket.readyState == websocket.OPEN){
                //正常
                if(matchButton.innerHTML == '开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message : 'startMatch',
                    }));
                }else if (matchButton.innerHTML == '匹配中...(点击停止)'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message : 'stopMatch',
                    }));
                }
            }else{
                //异常
                alert("当前您的连接已断开！请重新登录！");
                location.assign('/login.html');
            }
        }
    </script>
</body>
</html>